Component({
  properties: {
    isShow: {
      type: Boolean,
      value: false
    },
    title: {
      type: String,
      value: ''
    },
    pause: {
      type: Number,
      value: 2000
    },
    duration: {
      type: Number,
      value: 250
    },
    shade: {
      type: Boolean,
      value: true
    },
    shadeClose: {
      type: Boolean,
      value: false
    },
    maxWidth: {
      type: Number,
      optionalTypes: [String],
      value: "80%"
    },
    maxHeight: {
      type: Number,
      optionalTypes: [String],
      value: "80%"
    },
    width: {
      type: Number,
      optionalTypes: [String],
      value: "80%"
    },
    zIndex: {
      type: Number,
      optionalTypes: [String],
      value: 100
    },
    height: {
      type: Number,
      optionalTypes: [String],
      value: ""
    },
    button: {
      type: Array,
      value: [
        // { title: '取消', className: '',type:1},
        // { title: '确认', className: '',type:2}
      ]
    },

  },
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  data: {
    W: 0,
    H: 0,
    styleShowString: "",
    styleHideString:"display:none;visibility:hidden;",
    animToggle: false, //true 进入   false 退出
    isAnim:false,
    scrollH: 0
  },
  lifetimes: {
    attached: function () {
      console.log("lifetimes-attached")
    },
    moved: function () {
      console.log("lifetimes-move")
    },
    detached: function () {
      console.log("lifetimes-detached")
    },
  },

  created: function () {
    console.log("Component-create");
  },
  ready: function () {
    console.log("Component-ready")

  },

  observers: {
    'isShow': function () {
      console.log("xxxx")
      var that = this;
      if (this.data.isShow) {
        const query = this.createSelectorQuery();
        query.select('#J_coms-dialog').boundingClientRect();
        query.exec(function (res) {
          res.forEach(function (item, index, arr) {
            if (index == 0) {
              that.setData({
                W: res[0].width,
                H: res[0].height,
                styleShowString: "display:block;visibility: visible;margin-left:-" + res[0].width / 2 + "px;margin-top:-" + res[0].height / 2 + "px;width:" + res[0].width + "px;left:50%;top:50%;"
              });
            }
            that.setData({
              animToggle: true,
              isAnim:true
            })
          })

        })
      }else{
        that.setData({
          
          animToggle: false,
          isAnim:false
        })
      }




     
    }
  },
  methods: {
    transitionEnd: function () {
      console.log("transitionEnd");
    },

    animationIteration: function () {
      console.log("animationIteration")
    },
    animationStart: function () {
      console.log("transitionEnd");
    },
    animationend: function () {
      console.log("animationend");
      //进入的状态(显示状态)
      this.setData({
        animToggle: !this.data.animToggle,
      })
      if (this.data.animToggle) {
        this.setData({
          isShow: false
        })
      }
    },
    moved: function () {
      console.log("methods-move")
    },
    detached: function () {
      console.log("methods-detached")
    },
    _isPercent: function (str) {
      return (typeof str == "string") ? ((str.indexOf("%") == -1) ? false : true) : false;
    },

    _getNumber: function (str) {
      return str.match(/\d+(\.\d{0,2})?/)[0]
    },
    switchChange: function (e) {
      var data = e.currentTarget.dataset;
      if (data.type == 1) {
        this.onClose();
        this.triggerEvent('onClose')
      } else {
        this.triggerEvent('onConfirm')
      }
    },
    onClose: function () {
      this.setData({
        isAnim: false
      })
    }
  }

})